vue使用js

2024-07-13 02:10| 来源: 网络整理| 查看: 265

最近项目遇到了一个需求，在后台将学生信息以Excel表格导出，学生信息包含姓名、联系电话、照片等信息，一般情况下信息导出只需要导出字符串类型，但是现在的导出内容包含了图片，于是百度看到了js-table2excel可以导出图片，下面记录一下怎么在vue项目中使用js-table2excel导出带有文字、图片类型的excel表格。

1.安装js-table2excel

npm install js-table2excel

2.在需要用到的地方引入插件

import table2excel from 'js-table2excel'

3.在文件中使用

//js 部分 var column = []; this.$refs['myTable'].$children.forEach(element => { if(element.label && element.label!='操作') { let temp = { title: element.label, key: element.prop, //key值对应表单数据字段名称 type: 'text', } if(temp.title=='照片') { temp.type = 'image'; temp.key = 'photo'; temp.width= 75, temp.height= 100 } column.push(temp) } }); var datas = this.multipleSelection; //表单数据 const excelName = '学生信息_'+ new Date().toLocaleString() //文件名称 table2excel(column, datas, excelName) //生成Excel表格，自动下载

4.导出成功截图如下

但是我还想给表格顶部添加一行合并单元怎么弄呢？查看了源码，发现源码并没有实现合并单元的代码，于是乎本小菜鸟决定动手在顶部加个合并单元格。

上代码(ps: 源码路径：node_modules/js-table2excel/index.js)

修改源码并保存（修改表格样式也是直接在源码添加样式就好....简单粗暴>_

【本文地址】

vue使用js

vue使用js

今日新闻

推荐新闻